@import "../../sassmixins/mixins";

.dialog {
  position: fixed;
  @include square(100%);
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  display: none;

  .bg {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    opacity: 0;
    .inner {
      padding: px2rem-s(37px) px2rem-s(56px) px2rem-s(30px) px2rem-s(60px);
      width: px2rem-s(350px);
      @include center-block;
      background-image: url("../image/bg.jpg");
      background-size: 100% 100%;
      border-radius: px2rem-s(16px);

      .title {
        width: px2rem-s(350px);
        height: px2rem-s(73px);
        background-image: url("../image/title.png");
        background-size: 100% 100%;
      }

      .input-name {
        margin-top: px2rem-s(24px);
        .img {
          width: px2rem-s(64px);
          height: px2rem-s(30px);
          background-image: url("../image/name.png");
          background-size: 100% 100%;
          @include center-block;
        }

        .input {
          width: px2rem-s(350px);
          height: px2rem-s(64px);
          margin-top: px2rem-s(9px);
          input {
            @include box-sizing;
            border: 0;
            outline: none;
            margin: 0;
            border-radius: px2rem-s(6px);
            width: px2rem-s(350px);
            height: px2rem-s(64px);
            @include font-dpr(16px);
          }
        }
      }

      .input-phone {
        margin-top: px2rem-s(24px);
        .img {
          width: px2rem-s(92px);
          height: px2rem-s(28px);
          background-image: url("../image/phone.png");
          background-size: 100% 100%;
          @include center-block;
        }

        .input {
          width: px2rem-s(350px);
          height: px2rem-s(64px);
          margin-top: px2rem-s(9px);
          input {
            @include box-sizing;
            border: 0;
            outline: none;
            margin: 0;
            border-radius: px2rem-s(6px);
            width: px2rem-s(350px);
            height: px2rem-s(64px);
            @include font-dpr(16px);
          }
        }
      }

      .input-address {
        margin-top: px2rem-s(24px);
        .img {
          width: px2rem-s(64px);
          height: px2rem-s(28px);
          background-image: url("../image/address.png");
          background-size: 100% 100%;
          @include center-block;
        }

        .input {
          width: px2rem-s(350px);
          height: px2rem-s(109px);
          margin-top: px2rem-s(9px);
          textarea {
            @include box-sizing;
            border: 0;
            outline: none;
            margin: 0;
            border-radius: px2rem-s(6px);
            width: px2rem-s(350px);
            height: px2rem-s(109px);
            @include font-dpr(16px);
            resize: none;
          }
        }
      }

      .dialog-commit {
        margin-top: px2rem-s(34px);
        @include size(px2rem-s(165px), px2rem-s(65px));
        background-image: url("../image/commit.png");
        background-size: 100% 100%;
        @include center-block;
      }
    }
  }
}